<template>
	<view class="container">
		<view class="merchant" v-for="(value,index) in result" :key="index" :id="value.coupon_id" v-on:click="form_coupon">
			<view class="coupon_unit" :id="value.coupon_id">
				<image mode="aspectFill" :style="{height:merchant_pic}" :src="url+value.coupon_imgurl"></image>
				<view class="coupon_con" :style="{height:merchant_pic}">
					<view class="coupon_title">{{value.coupon_name.substr(0,12)}}</view>
					<view class="coupon_integral"><text>￥{{value.coupon_denomination}}</text></view>
					<view class="coupon_number">已兑换数量<text>{{value.get_sum}}/{{value.coupon_stock}}</text></view>
					<view class="coupon_integral">所需积分<text>{{value.exchange_price}}</text></view>
				</view>
				<view class="coupon_operate">修改</view>
			</view>
		</view>
		<view class="lh"></view>
		<view class='button' :data-status="status" id="0" v-on:click='form_coupon'>发布代金券</view>
	</view>
</template>
<style>
	page{background: #F5f5f5 !important;}
	.button{width:90%;margin:20upx 5%;font-size: 30upx;height: 80upx;position: fixed;bottom:0;left:0;
			border-radius: 50upx;background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;text-align: center;line-height: 80upx;}
	.lh{width:100%;height: 120upx;}
	.merchant{width:94%;margin:20upx 3%;padding:10upx 0;border-radius: 20upx;background: #FFFFFF;}
	.coupon_unit{width:94%;padding:10upx 3%;display: flex;justify-content: space-between;align-items: center;margin:10upx 0;}
	.coupon_unit image{width:20%;}
	.coupon_con{width:58%;padding-left:2%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
	.coupon_title{font-size: 32upx;color: #333333;}
	.coupon_number{font-size: 28upx;color: #999999;}
	.coupon_number text{padding-left: 10upx;}
	.coupon_integral{font-size: 28upx;color: #999999;}
	.coupon_integral text{color: #E03636;padding-left: 10upx;font-size: 32upx;}
	.coupon_operate{width:18%;height: 60upx;line-height: 60upx;color: #FFFFFF;text-align: center;font-size: 28upx;
	background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 30upx;}
</style>
<script>
	// import QQMapWX from  "../../static/js/qqmap-wx-jssdk.min.js";
	export default {
		data() {
			return {
				width:0,
				height:0,
				result:[],
				start:0,
				merchant_pic:'',
				url: getApp().globalData.url,
				img_url:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.merchant_pic = w*0.94*0.94*0.2+"px";
			this.initialize();
		},
		onShow(){},
		methods: {
			
			form_coupon:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"form_coupon?id="+id
				})
			},
			initialize:function()
			{
				var that = this;
				var store_id = uni.getStorageSync("store_id");
				uni.request({
					url: that.url+'/wechat_find_store_coupon', 
					data: {store_id:store_id,start:this.start},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==1)
						{
							that.start += 10;
							that.result  = res.data.result;
						}
					}
				});
			}
		}
	}
</script>